<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信聊天室</title>
    <link rel="stylesheet" href="styles/normalize.css">
    <link rel="stylesheet" href="styles/reset.css">
    <link rel="stylesheet" href="styles/chart.css">
</head>

<body>
    <div id="chart-container">
        <div class="chart-user-list" id="chart-user-list">
            <div class="user-item">
                <!-- <img src="images/avatar/15.jpg" alt="">未知名 -->
            </div>
        </div>
        <div class="chart-main-area">
            <div class="chart-main-title">
                <h1>微信聊天室(<span id="userNumber"></span>人)-<span id="currentUser"></span></h1>
            </div>
            <div class="chart-list" id="chart-list">
                <div style="display: none;" class="user-logined" id="user-logined"><span id="logined-user"></span>上线了</div>
                <!-- <div class="chart-item">
                    <div class="user-face"><img src="images/avatar/11.jpg" alt=""></div>
                    <div class="user-message">111</div>
                </div> -->
            </div>
            <div class="chart-form">
                <div><textarea class="chart-form-message" id="message"></textarea></div>
                <div><input type="button" id="send" class="chart-form-send" value="发表"></div>
            </div>
        </div>
    </div>
    <script src="scripts/socket.io.js"></script>
    <script>
        // 当前页面的url中包含name与avatar参数
        // 获取他们，更新UI
        // search == "?name=xxxx&avatar=xxxx"
        let search = window.location.search;
        if (!search) { //没有传参
            Location = "index.html"; //回到首页
        }
        // 解析name与avatar
        let params = search.split('&');
        let name = decodeURI(params[0].split('=')[1]);
        let avatar = decodeURI(params[1].split('=')[1]);
        // 更新UI
        let div = document.getElementsByClassName('user-item')[0];
        div.innerHTML = `<img src="images/avatar/${avatar}" alt="">${name}`;



        //  建立websocket连接
        let socket = io('ws://localhost:3000/');
        console.log(socket);


        // 为cosket绑定接收用户数量更新的事件
        socket.on('usercount', (data) => {
            let span = document.getElementById('userNumber');
            span.innerHTML = data;
        });

        // 为socket绑定接收消息的事件
        socket.on('textmsg', (data) => {
            console.log('您有一条新消息：' + data);
            // 将消息上屏，显示在聊天记录区
            let list = document.getElementById('chart-list');
            let item = document.createElement('div');
            item.className = 'chart-item';
            item.innerHTML = `
            <div class="user-face">
                <img src="images/avatar/${data.avatar}" alt="">
            </div>
            <div style="font-size:0.8em;">${data.name}</div>
            <div class="user-message">${data.msg}</div>`;
            list.appendChild(item);
            // 使聊天记录持续滚动在底部
            list.scrollTop = list.scrollHeight;
        })

        // 为发表按钮绑定事件
        let send = document.getElementById('send');
        let message = document.getElementById('message');
        send.addEventListener('click', () => {
            let msg = message.value; //文本域中的消息内容
            socket.emit('textmsg', {
                'name': name,
                'avatar': avatar,
                'msg': msg
            });
        });
    </script>
</body>

</html>